import mesop as me

@me.page()
def card_page():
    with me.box(style=me.Style(
        width=300,
        background=me.theme_var("surface"),
        border_radius=8,
        padding=me.Padding.all(16),
        box_shadow="0 4px 6px rgba(0, 0, 0, 0.1)",
        display="flex",
        flex_direction="column",
        gap=16
    )):
        me.text("Card Title", type="headline-5")
        me.text("This is the content of the card. You can add more components here.", type="body-1")
        me.button("Action", on_click=card_action, type="flat", style=me.Style(align_self="flex-end"))

def card_action(e: me.ClickEvent):
    print("Card action clicked")